<template>
    <div class="cloud-rain-container">
        <div class="content">
            <div ref="cloud" class="cloud">
                <img src="../../assets/cloud.png" alt="" />
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: "",
    props: {},
    data() {
        return {};
    },
    created() {},
    mounted() {
        this.runAnimate();
    },
    computed: {},
    watch: {},
    methods: {
        //运行动画
        runAnimate() {
            const init = () => {
                const dom = this.generateTextDom();
                this.setAnimate(dom);
                requestAnimationFrame(init);
            };
            requestAnimationFrame(init);
        },
        //生成雨dom
        generateTextDom() {
            const dom = document.createElement("div");
            dom.classList.add("text");
            this.$refs.cloud.appendChild(dom);
            dom.innerText = this.getRandomAlpha();
            return dom;
        },
        //设置动画
        setAnimate(dom) {
            const dx = this.getRandomNum(0, 230);
            const animation = dom.animate(
                [
                    { transform: `translate(${dx}px,0)`, offset: 0 },
                    { transform: `translate(${dx}px,260px)`, offset: 0.7 },
                    { transform: `translate(${dx}px,260px)`, offset: 1 },
                ],
                {
                    duration: this.getRandomNum(2000, 3000),
                    fill: "forwards",
                    easing: "linear",
                }
            );
            animation.onfinish = () => {
                dom.remove();
            };
        },
        //生成某个区间内的随机数
        getRandomNum(min, max) {
            return Math.random() * (max - min) + min;
        },
        //随机生成0-9a-z之间的值
        getRandomAlpha() {
            //生成0-35数字，共36个数字，这里输入最大值36，由于是取整，所以永远不到36
            //得到0-35的数字，转为36进制，因为0-35，不到36，所以36进制永远不进位，是0-9a-z之间的值
            return parseInt(this.getRandomNum(0, 36)).toString(36);
        },
        //随机生成汉字
        getRandomChinese() {
            return String.fromCharCode(
                parseInt(this.getRandomNum(0x4e00, 0x9fff))
            );
        },
    },
};
</script>
<style lang="less">
@import "~@/styles/mixins.less";
.cloud-rain-container {
    .self-center();
    width: 600px;
    height: 600px;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 18px;
    box-shadow: 2px 2px 5px #fff;
    .content {
        width: 600px;
        height: 400px;
        -webkit-box-reflect: below 1px
            linear-gradient(
                transparent,
                transparent,
                transparent,
                transparent,
                #0f000f
            );
        position: relative;
        .cloud {
            width: 250px;
            height: 250px;
            margin: 0 auto;

            filter: drop-shadow(0 0 60px #fff);
            img {
                width: 250px;
            }
            .text {
                width: 20px;
                height: 20px;
                position: absolute;
                z-index: -1;
                left: 0;
                top: 120px;
                color: #fff;
                text-transform: uppercase;
                text-shadow: 0 0 5px #fff, 0 0 15px #fff, 0 0 30px #fff;
                transform-origin: bottom;
            }
        }
    }
}
</style>
